<template>
  <div>
    <div style="position: absolute; top: 0; background: #ff9e9eaa">
      <div style="color: #ffffff">3D功能面板：{{ number }}</div>
      <button @click="initMap_GaoDe" style="margin-right: 10px">加载高德卫星地图</button>
      <button @click="initMap_online" style="margin-right: 10px">加载在线地图</button>
      <button @click="initMap_offline_SuperMap" style="margin-right: 10px">加载离线超图地图</button>
      <button @click="addTiltPhotography_YingChuan" style="margin-right: 10px">加载倾斜摄影(银川社区)</button>
      <button @click="addTiltPhotography_XinHuaShangQuan" style="margin-right: 10px">加载倾斜摄影(新华商圈)</button>
      <button @click="addTiltPhotography_NingXia" style="margin-right: 10px">加载倾斜摄影(宁夏)</button>
      <button @click="getPerspective" style="margin-right: 10px">获取视角</button>
      <button @click="addBaiMo" style="margin-right: 10px">加载周边</button>
      <button @click="baiMoEffects" style="margin-right: 10px">周边特效</button>
      <button @click="electronicFence" style="margin-right: 10px">电子围栏</button>
      <button @click="electronicLabel" style="margin-right: 10px">电子标签</button>
      <button @click="PoiLabel" style="margin-right: 10px">POI标注</button>
      <button @click="circleRipple" style="margin-right: 10px">波纹</button>
      <button @click="raderScan" style="margin-right: 10px">雷达扫描</button>
      <button @click="alarm" style="margin-right: 10px">告警</button>
      <button @click="rotationPoint" style="margin-right: 10px">标记点位</button>
      <button @click="roadLine" style="margin-right: 10px">道路线</button>
      <button @click="addCamera" style="margin-right: 10px">添加摄像头</button>
      <button @click="multiStreamCamera" style="margin-right: 10px">多流摄像头</button>
      <button @click="addGridData" style="margin-right: 10px">网格数据</button>
      <button @click="addGridData_1" style="margin-right: 10px">网格数据_业主提供_Level1</button>
      <button @click="addGridData_2" style="margin-right: 10px">网格数据_业主提供_Level2</button>
      <button @click="destroyGridData" style="margin-right: 10px">销毁网格数据</button>
      <button @click="destroyTiltPhotography_YingChuan" style="margin-right: 10px">销毁(银川社区)</button>
      <button @click="destroyCamera" style="margin-right: 10px">销毁摄像头</button>
      <button @click="destroyMultiStreamCamera" style="margin-right: 10px">销毁多流摄像头</button>
      <button @click="destroyPoiLabel" style="margin-right: 10px">销毁POI标注</button>
      <button @click="destroyBaiMo" style="margin-right: 10px">销毁周边</button>
    </div>
    <iframe
      id="iframe"
      :src="src"
      ref="iframe"
      width="100%"
      :height="iframeHeight"
      scrolling="no"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
import {msgType} from "../../public/static/3d/utils/msgType";
export default {
  name: "HelloWorld",
  data() {
    return {
      src: "static/3d/index.html",
      number: "",
      tiltPhotography_YingChuan_id:"873243724",
      tileset_BaiMo_id:"b26446c9-771c-c603-c4d8-4b2a581011dd",
      iframeWin: {},
      iframeHeight: document.documentElement.clientHeight,
    };
  },
  created() {
    // 实时监听浏览器高度
    window.addEventListener("resize", () => {
      this.iframeHeight = document.documentElement.clientHeight;
    });
  },
  mounted() {
    // 将vue中的方法赋值给window
    window.addEventListener("message", this.handleMessage);
    this.iframeWin = this.$refs.iframe.contentWindow;
  },
  methods: {
    //加载高德卫星地图
    initMap_GaoDe() {
      let data = { type: msgType.initMap_GaoDe, params: { data: "all" } };
      this.sendMsgTo3D(data);
    },
    //加载在线地图
    initMap_online() {
      let data = { type: msgType.initMap_online, params: { data: "all" } };
      this.sendMsgTo3D(data);
    },
    //加载离线超图地图
    initMap_offline_SuperMap() {
      let data = { type: msgType.initMap_offline_SuperMap, params: { url: "http://172.31.119.254:8090/iserver/services/map-ugcv5-YXdataL180124/rest/maps/YXdataL180124" } };
      this.sendMsgTo3D(data);
    },
    //加载倾斜摄影(银川)
    addTiltPhotography_YingChuan(){
      let data = { type: msgType.addTiltPhotography, params: {id:this.tiltPhotography_YingChuan_id,name:"银川"} };
      this.sendMsgTo3D(data);
    },
    //销毁倾斜摄影(银川)
    destroyTiltPhotography_YingChuan(){
      let data = { type: msgType.destroyTiltPhotography, params: {id: this.tiltPhotography_YingChuan_id} };
      this.sendMsgTo3D(data);
    },
    //加载倾斜摄影(新华商圈)
    addTiltPhotography_XinHuaShangQuan(){
      let data = { type: msgType.addTiltPhotography, params: {id:"5ef8e5bd-17e1-1b00-5cfe-1b43ab20badb",name:"新华商圈"} };
      this.sendMsgTo3D(data);
    },
    //加载倾斜摄影(宁夏)
    addTiltPhotography_NingXia(){
      let data = { type: msgType.addTiltPhotography, params: {id:"b34dc7ee-6700-73eb-0b25-97b531149973",name:"宁夏"} };
      this.sendMsgTo3D(data);
    },
    //获取视角
    getPerspective(){
      let data = { type: msgType.getPerspective, params: {} };
      this.sendMsgTo3D(data);
    },
    //添加摄像头
    addCamera() {
      let data = { type: msgType.addCamera, params: {id: "3462b509-b713-f94a-8498-936f4cb846a0", position: { h: 0, p: 0, r: 0, x: 106.27230651861154, y: 38.45982883911333, z: 72 }, type: "摄像头-枪机"} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.27437,y:38.457951,z:192.98,h:5.48,p:-0.36059,r:0,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //多流摄像头
    multiStreamCamera(){

        let detailParams = [{id:"9d505cfa-13c1-8942-71ef-9b734a017472",tip:"线路一"},{id:"7eae4e09-ad73-b6fe-c753-eecaf5c37bf3",tip:"线路二"},{id:"5d201532-0699-c8e8-4f54-3accc9388fdb",tip:"线路三"},{id:"3b4ab7c4-0498-f75f-2d5c-496086a36463",tip:"线路四"},{id:"74b4ca2d-ed6d-9461-73ed-82dd88b68587",tip:"线路五"}];

        let data = { type: msgType.multiStreamCamera, params: {id:"47fd54d1-7c32-67af-e0d2-ed7923822b89",position:{x:106.26509902328885,y:38.459397700148074,z:100},detail: detailParams}};
        this.sendMsgTo3D(data);

        //飞行到指定位置
        let flyParam = { type: msgType.flyTo, params:{x:106.264931,y:38.452395,z:430.11,h:0.06,p:-0.4394303851,r:0,duration:2}};
        this.sendMsgTo3D(flyParam);
    },
    //销毁摄像头
    destroyCamera(){
      let data = { type: msgType.destroyCamera, params: {id: "3462b509-b713-f94a-8498-936f4cb846a0"} };
      this.sendMsgTo3D(data);
    },
    //销毁多流摄像头
    destroyMultiStreamCamera(){
      let data = { type: msgType.destroyMultiStreamCamera, params: {id: "47fd54d1-7c32-67af-e0d2-ed7923822b89"} };
      this.sendMsgTo3D(data);
    },
    //加载周边
    addBaiMo(){
      let data = { type: msgType.addBaiMo, params: {id: this.tileset_BaiMo_id} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.310864,y:38.46368,z:972.7,h:4.59,p:-0.418729,r:0,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //周边特效
    baiMoEffects(){
      let data = { type: msgType.baiMoEffects, params: {id: "4db82d74-dd54-95a2-8b81-b74eb0fcbc62"} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.289465,y:38.476562,z:428.35,h:5.99,p:-0.488456,r:6.28,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //销毁周边
    destroyBaiMo(){
      let data = { type: msgType.destroyBaiMo, params: {id: this.tileset_BaiMo_id} };
      this.sendMsgTo3D(data);
    },
    //添加网格数据
    addGridData(){
      let data = { type: msgType.addGridData, params: {} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.188131,y:38.411423,z:5073.91,h:1.12,p:-0.36686,r:0,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //添加网格数据_业主提供_level1
    addGridData_1(){
      let data = { type: msgType.addGridData_1, params: {id:"f26161a0-d213-8cec-edce-37e287a43770"} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.188131,y:38.411423,z:5073.91,h:1.12,p:-0.36686,r:0,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //添加网格数据_业主提供_level2
    addGridData_2(){
      let data = { type: msgType.addGridData_2, params: {id:"c2cc8e32-c22c-a05c-20d9-3ed358e8cc95"} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.248427,y:38.458329,z:519.68,h:1.12,p:-0.3668600,r:6.28,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //销毁网格数据
    destroyGridData(){
      let data = { type: msgType.destroyGridData, params: {id:"f26161a0-d213-8cec-edce-37e287a43770"} };
      this.sendMsgTo3D(data);
    },
    //电子围栏
    electronicFence(){
      let data = { type: msgType.electronicFence, params: {} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.238285,y:38.454809,z:861.55,h:1.02,p:-0.3747927,r:0,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //电子标签
    electronicLabel(){
      let data = { type: msgType.electronicLabel, params: {id:"5c5ec3a0-2eec-76f2-a63f-f2207b3474cd", position: {x: 106.27090758418133, y: 38.46520806141436, z: 66.11934522910927 }, type: "电子标签"} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.238285,y:38.454809,z:861.55,h:1.02,p:-0.3747927,r:0,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //POI标注    如果name值为空， name:"" , 则只显示icon图标
    PoiLabel(){
      let data = { type: msgType.poiLabel, params: {id: "9bad10ea-711b-9bb8-6977-a3a5e862ea7f", name:"预警信息描述",icon:{imgUrl:"./assets/images/warn_point.png",width:"50",height:"50"},position: {x: 106.258696841, y: 38.4651014377, z: 300 }, type: "POI-标签"} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.238285,y:38.454809,z:861.55,h:1.02,p:-0.37479,r:6.28,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //销毁POI标注
    destroyPoiLabel(){
      let data = { type: msgType.destroyPoiLabel, params: {id: "9bad10ea-711b-9bb8-6977-a3a5e862ea7f"} };
      this.sendMsgTo3D(data);
    },
    //告警
    alarm(){
      let data = { type: msgType.alarm, params: {id:"83dfde1a-e7ce-5d9d-1c2d-b869fcd386d3", position: {x: 106.276969249, y: 38.4608576045, z: 17.41017 }, type: "告警"} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.283322,y:38.444412,z:1025.96,h:5.78,p:-0.434550,r:0,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //波纹
    circleRipple(){
      let data = { type: msgType.circleRipple, params: {id:"34fd69f6-1cd0-5f67-dfbd-0b04f46b8f37", position: {x: 106.258696841, y: 38.4651014377 }, type: "波纹"} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.238285,y:38.454809,z:861.55,h:1.02,p:-0.37479,r:6.28,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //雷达扫描
    raderScan(){
      let data = { type: msgType.raderScan, params: {} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.238285,y:38.454809,z:861.55,h:1.02,p:-0.37479,r:6.28,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //标记点位
    rotationPoint(){
      let data = { type: msgType.rotationPoint, params: {id:"b0223ef1-7471-e5b3-18f4-4a342699cb9a", position: {x: 106.2684777175, y: 38.46080639749, z: 100 }, type: "标记点位"} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.259527,y:38.447836,z:853.24,h:0.13,p:-0.50139,r:0,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //道路线
    roadLine(){
      let data = { type: msgType.roadLine, params: {} };
      this.sendMsgTo3D(data);

      //飞行到指定位置
      let flyParam = { type: msgType.flyTo, params:{x:106.26964,y:38.434849,z:1917.09,h:6.23,p:-0.5676206,r:0,duration:2}};
      this.sendMsgTo3D(flyParam);
    },
    //上升粒子
    ascendingParticle(){
      let data = { type: msgType.ascendingParticle, params: {} };
      this.sendMsgTo3D(data);
    },
    // 外部vue向iframe内部传数据
    sendMsgTo3D(data) {
      this.iframeWin.postMessage(data, "*");
    },

    // 根据上面制定的结构来解析iframe内部发回来的数据
    handleMessage(event) {

      if(event.data != null){
        if(event.data.type == "getPerspective"){
          this.$message.success("当前视角："+event.data.value);
        }else if(event.data.type == "camera_listener_z"){
          console.log(event.data.value);   //得到当前视角的高度
        }else if(event.data.type == "camera"){
          this.$message.success("摄像头ID："+event.data.value.id);
        }else if(event.data.type == "click_geojson"){
          this.$message.success("当前点击的行政区划名称为："+event.data.value);
        }else if(event.data.type == "camera_destroy"){
          this.$message.success("摄像头被销毁，销毁的ID："+event.data.id);
        }else if(event.data.type == "tiltPhotography_destroy"){
          this.$message.success("倾斜摄影被销毁，销毁的ID："+event.data.id);
        }else if(event.data.type == "POI_Lable"){
          this.$message.success("POI标签ID："+event.data.value);
        }else if(event.data.type == "POI_Lable_destroy"){
          this.$message.success("POI标签被销毁，销毁的ID："+event.data.id);
        }else if(event.data.type == "electron_lable_detail"){
          this.$message.success("电子标签ID："+event.data.value);
        }else if(event.data.type == "electron_lable_cancel"){
          this.$message.success("电子标签被销毁，销毁ID："+event.data.value);
        }else if(event.data.type == "click_multiStreamCamera"){
          this.$message.success("多流摄像头ID："+event.data.value);
        }
      }
    },
  },
};
</script>

<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
